<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Table</view>
			<view class="tui-page__desc">table表格：手机的窄屏对于表格来说总不是最佳选择，所以如果可能的话，还是避免使用这种形式。</view>
		</view>
		<view class="tui-page__bd">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="table(1)">基础表格</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="table(2)">带斑马纹表格</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="table(3)">固定表头</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="table(4)">固定列</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="table(5)">多级表头</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="table(6)">复杂表格</tui-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		table(index) {
			let url;
			switch (index) {
				case 1:
					url = '../table-basics/table-basics';
					break;
				case 2:
					url = '../table-stripe/table-stripe';
					break;
				case 3:
					url = '../table-fixedHeader/table-fixedHeader';
					break;
				case 4:
					url = '../table-fixedCol/table-fixedCol';
					break;
				case 5:
					url = '../table-multistage/table-multistage';
					break;
				case 6:
					url = '../table-complex/table-complex';
					break;
				default:
					break;
			}
			this.tui.href(url);
		}
	}
};
</script>

<style></style>